import React, { useState } from 'react';
import { Button } from 'antd';

/**
 * 应用场景：考虑到性能优化，如何在增加苹果手机售出台数是，不执行handleCalc复杂逻辑运算？
 */
export default () => {
    const [miCount, setMiCount] = useState(0);
    const [appleCount, setAppleCount] = useState(0);

    // 计算小米手机当前销售额
    const handleCalc = () => {
        console.log('----进入复杂逻辑----');
        // 真实案例中，会有复杂的计算逻辑，会特别消耗性能
        return miCount * 3980;
    }

    return (
        <>
            {console.log('----页面渲染----')}
            <div>
                {`小米手机当前销售额：${handleCalc()} 元`}
            </div>
            <div>
                <span style={{ marginRight: 6 }}>
                    {`小米手机当前售出：${miCount} 台`}
                </span>
                <span>
                    <Button onClick={() => setMiCount(miCount + 1)}>+1</Button>
                </span>
            </div>
            <div>
                <span style={{ marginRight: 6 }}>
                    {`苹果手机当前售出：${appleCount} 台`}
                </span>
                <span>
                    <Button onClick={() => setAppleCount(appleCount + 1)}>+1</Button>
                </span>
            </div>
        </>
    )
}